<template>
  <div class="zx-msg-tip">
    <div class="pic" :class="{scuess: type === 'scuess', warn: type === 'warn', error: type === 'error', emptyforcard: type === 'emptyforcard', emptyfordata: type === 'emptyfordata'}"><img :src="theImg" /></div>
    <div class="text" :class="{left: theTextAlign}">{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: 'zxMsgTips',
  props: {
    data: {
      type: Array,
      default () {
        return ['', '']
      }
    },
    msg: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      chenck: [],
      theImg: '',
      theTextAlign: false
    }
  },
  methods: { },
  mounted: function () {
    if (this.type === 'scuess') {
      this.theImg = require('../../assets/img/sucess.png')
    } else if (this.type === 'warn') {
      this.theImg = require('../../assets/img/warn.png')
    } else if (this.type === 'error') {
      this.theImg = require('../../assets/img/error.png')
    } else if (this.type === 'emptyforcard') {
      this.theImg = require('../../assets/img/emptyCard.png')
    } else if (this.type === 'emptyfordata') {
      this.theImg = require('../../assets/img/emptyData.png')
    }
    if (this.msg.length > 23) {
      this.theTextAlign = true
    }
  }
}
</script>

<style lang="less">
.zx-msg-tip { width: 100%; text-align: center; padding: 0.7rem 0.3rem 0.7rem 0.3rem;}
.zx-msg-tip>.pic { width: 100%; text-align: center; box-sizing: border-box;}
.zx-msg-tip>.pic.scuess { height: 1.8rem;}
.zx-msg-tip>.pic.warn { height: 1.8rem;}
.zx-msg-tip>.pic.error { height: 1.8rem;}
.zx-msg-tip>.pic.emptyforcard { height: 2.5rem;}
.zx-msg-tip>.pic.emptyfordata { height: 3.2rem;}
.zx-msg-tip>.pic:before { content: " "; display: inline-block; height: 100%; vertical-align: middle; width: 0;}
.zx-msg-tip>.pic img { max-width: 100%; max-height: 100%; vertical-align: middle;}
.zx-msg-tip>.text { padding-top: 0.5rem;}
.zx-msg-tip>.text.left { text-align: left;}
</style>
